﻿
@{
    ViewBag.title = "index";
    Layout = "/Views/Shared/_Layout_iframe.cshtml";
}
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Detail</title>
    <style>
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background-color: #f4f4f9;
            margin: 0;
            padding: 0;
        }

        fieldset.layui-elem-field.layui-field-title legend {
            font-size: 24px;
            font-weight: bold;
            color: #808080;
            padding: 0 10px;
        }

        #average {
            display: block;
            font-size: 18px;
            font-weight: 600;
            color: #16baaa;
            margin: 10px auto;
            width: 90%;
            max-width: 1200px;
        }

        table.layui-table {
            width: 100%;
            border-collapse: collapse;
        }

        table.layui-table th {
             background-color: #16baaa;
             color: white;
             font-weight: 600;
        }

        table.layui-table tr:hover {
             background-color: rgba(22, 186, 170, 0.1);
        }

        input[type="hidden"] {
            display: none;
        }
    </style>
</head>
<body>
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
        <legend>商品采购详情</legend>
    </fieldset>
    <lable id="average">摊波成本</lable>
    <div style="padding: 16px">
        <div class="layui-card">
            <div class="layui-card-body">
                <table class="layui-hide" id="testprote" lay-filter="testprote"></table>
            </div>
        </div>
        <input type="hidden" name="Id" id="hfid" value="@ViewBag.Id" />
    </div>

    <script>
        var table;//全局
        layui.use(['table', 'util', 'layer'], function () {
            table = layui.table;
            util = layui.util;
            layer = layui.layer;
            let productId = $("#hfid").val();
            //第一个实例
            table.render({
                elem: '#testprote'
                , url: '/product/ProcurementsContent/' + productId //数据接口

                , defaultToolbar: []
                , height: 'full-200' // 最大高度减去其他容器已占有的高度差
                , cellMinWidth: 100// 适当增大最小列宽
                , totalRow: true // 开启合计行

                , cols: [[ //表头
                    { field: 'PurcharTime', title: '时间轴', templet: d => { return util.toDateString(d.CreateTime.replace('/Date(', '').replace(')/', ''), 'yyyy-MM-dd ') } }
                    , { field: 'PurcharName', title: '采购商' }
                    , { field: 'PurcharPrice', title: '采购价格' }
                    , { field: 'Number', title: '采购数量' }
                ]]
                , done: function (res, curr, count) {
                    // 计算摊波成本
                    let totalPrice = 0;
                    let totalQuantity = 0;
                    res.data.forEach(record => {
                        let purchasePrice = parseFloat(record.PurcharPrice);
                        let purchaseQuantity = parseInt(record.Number);
                        totalPrice += purchasePrice * purchaseQuantity;
                        totalQuantity += purchaseQuantity;
                    });
                    let spreadCost = totalQuantity > 0 ? totalPrice / totalQuantity : 0;
                    // 在 label 中显示摊波成本
                    document.getElementById('average').textContent = `摊波成本: ${spreadCost.toFixed(2)}`;
                }
            });
        });
    </script>
</body>
</html>
